<template>
  <div>
    <nav-bar title="访客登记"></nav-bar>
    <div class="visitorShare maxinBox">
      <van-form class="surveyed">
        <h4 style="margin: 0.625rem;">被访人信息</h4>
        <van-field
          v-model="form.interviewee"
          name="被访人"
          label="被访人"
          placeholder="请输入被访人"
        />
        <van-field
          v-model="form.intervieweeMobile"
          name="被访人电话"
          label="被访人电话"
          placeholder="请输入被访人电话"
        />
        <h4 style="margin: 0.625rem;">访客信息登记</h4>
        <van-field
          required
          v-model="form.name"
          name="姓名"
          label="姓名"
          placeholder="姓名"
        />
        <van-field name="radio" label="性别" required>
          <template #input>
            <van-radio-group v-model="form.sex" direction="horizontal">
              <van-radio :name="0">男</van-radio>
              <van-radio :name="1">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          required
          v-model="form.mobile"
          name="联系方式"
          label="联系方式"
          placeholder="请输入您的联系方式"
        />
        <van-cell required is-link title="来访事由" :value="visitorReason" @click="showVisitorReason = true" />
        <van-action-sheet v-model="showVisitorReason" :actions="visitorReasonList" @select="onSelect" />
        <van-cell required title="访问开始时间" @click="startTime" is-link :value="form.visitStartTime" />
        <van-popup v-model="showStartTime" position="bottom" style="height: 40%">
          <van-datetime-picker
            @confirm="startConfirm"
            @cancel="showStartTime = false"
            v-model="currentDate"
            type="datetime"
            title="选择完整时间"
            :min-date="minDate"
            :max-date="maxDate"
          />
        </van-popup>
        <van-cell required title="访问结束时间" :value="form.visitEndTime" />
        <van-field name="uploader" label="照片上传" required>
          <template #input>
            <van-uploader multiple :max-count="1" v-model="uploader" :after-read="uploadAvatar" />
          </template>
        </van-field>
        <div class="backgroundfff marginTop5" style="padding: 0.9375rem;">
          <van-button round block type="info" @click="onSubmit" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import myAPI from '../../../api/myAPI.js'
  import dashbordAPI from '../../../api/dashbordAPI.js'
  export default {
    data() {
      return {
        form: {
          projectId: localStorage.getItem('projectId'),
          interviewee: '',
          intervieweeMobile: '',
          headUrl: '',
          mobile: '',
          name: '',
          reasonId: '',
          // id: '',
          sex: '',
          visitEndTime: '',
          visitStartTime: ''
        },
        uploader:[],
        startDate: '',
        endDate: '',
        showStartTime: false,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
        visitorReason: '',
        showVisitorReason: false,
        visitorReasonList: [],
      }
    },
    methods:{
      // 上传图片
      uploadAvatar(file){
        dashbordAPI.uploadAvatar(file.file).then(res => {
          this.form.headUrl = res.fileUrl
        })
      },
      // 获取访问事由
      getVisitorReason() {
        myAPI.visitorReason().then(res => {
          this.visitorReasonList = res.map(item => {
            return {
              name: item.text,
              value: item.value
            }
          })
        })
      },
      // 选择访客事由
      onSelect(item) {
        this.showVisitorReason = false;
        this.form.reasonId = item.value
        this.visitorReason = item.name
      },
      // 选择时间
      startTime() {
        this.showStartTime = true
      },
      // 日期选择确定按钮
      startConfirm(val) {
       this.form.visitStartTime = moment(val).format('YYYY-MM-DD HH:mm:ss')
       let end = moment(val).valueOf() + 24*60*60*1000
       this.form.visitEndTime = moment(end).format('YYYY-MM-DD HH:mm:ss')
       this.showStartTime = false
      },
      // 提交登记信息
      onSubmit() {
        if (this.form.name === '') {
          this.$toast.fail('请输入访客姓名');
          return;
        }

        if (this.form.mobile === '') {
          this.$toast.fail('请输入访客手机号');
          return;
        }
        let rule = /^1[3456789]\d{9}$/
        if (!rule.test(this.form.mobile)) {
          this.$toast.fail('请输入正确的访客手机号');
          return;
        }
        if (!this.uploader.length) {
          this.$toast.fail('请上传头像');
          return;
        }
        if (this.form.sex === '') {
          this.$toast.fail('请选择性别');
          return;
        }
        if (this.form.visitStartTime === '') {
          this.$toast.fail('请选择到访时间');
          return;
        }
        if (this.form.reasonId === '') {
          this.$toast.fail('请选择访问事由');
          return;
        }
        myAPI.visitorRegistration(this.form).then(res => {
          this.$toast('登记成功')
        })
      }
    },
    mounted() {
      this.getVisitorReason()
    }
  }
</script>
